<template>
  <div>
    <div>{{ teacher.name }}</div>
    <div>{{ teacher.age }}</div>
    <div>{{ teacher.salary }}</div>
    <button @click="timeFly">过了一年</button>
  </div>
</template>

<script>
//之前的写法 不能这么写了
// document.querySelector('button').addEventListener('click',function(){
//     console.log(1);
// })
export default {
  //该vue组件的数据源
  data() {
    return {
      teacher: {
        name: 'harry',
        age: 28,
        salary: 3000,
      },
    }
  },

  //methods 用来存放事件,methods是一个对象，里面存放了需要触发的事件
  //千万别写成method，事件很多，所以是复数形式后面跟上s
  //事件和事件之间用，隔开
  methods: {
    timeFly() {
      this.teacher.age += 1
      this.teacher.salary += 500
    },
  },
  watch: {},
}
// 非业务需求：尽可能不要直接深度监视 => 相对消耗性能
// 如果是业务需求，就需要深度监视，就正常监视即可~
</script>

<style scoped>
.box {
  width: 500px;
  height: 500px;
  background-color: #087;
}
</style>
